<template>
  <van-row>
    <van-nav-bar
      title="排产信息"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/')"
      @click-right="toSubmit"
    >
      <template #right>
        <van-icon name="plus" size="20" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-search v-model="page.query.keyword" show-action placeholder="请输入关键字查询" @search="handleSearch">
        <template #action>
          <div @click="handleSearch">搜索</div>
        </template>
      </van-search>
      <van-dropdown-menu :close-on-click-outside="false">
        <van-dropdown-item v-model="page.query.priority" :options="priorityOptions" @change="handleSearch" />
        <van-dropdown-item v-model="page.query.sourceType" :options="sourceTypeOptions" @change="handleSearch" />
        <van-dropdown-item v-model="page.query.sortType" :options="sortTypeOptions" @change="handleSearch" />
        <van-dropdown-item ref="item" title="筛选">
          <van-cell>
            <template #default>
              <van-field
                readonly
                clickable
                :value="produceDateRange"
                placeholder="选择日期"
                label="排产日期"
                input-align="left"
                @click="showDateRangePicker = true"
              />
            </template>
          </van-cell>
          <div style="padding: 20px 20px;display: flex">
            <van-button style="flex: 1" round @click="handleReset">
              重置
            </van-button>
            <van-button style="flex: 1" type="danger" round @click="handleSearch('0')">
              确定
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-tabs v-model="activeTab" :swipe-threshold="3" @click="handleTabChange">
        <van-tab
          v-for="(item,index) in produceStateList"
          :key="index"
          :title="item.stateName+'('+item.count+')'"
        />
      </van-tabs>
      <van-list
        v-model="tableLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="doPage"
      >
        <van-cell v-for="(item,index) in tableData" :key="index" is-link @click="toDetail(item)">
          <template #title>
            <div class="title">
              <div v-html="highlightText(item.title, page.query.keyword)" />
            </div>
            <div class="right_tag">
              <produce-state-tag v-model="item.produceState" />
              <priority-tag v-model="item.priority" />
              <almost-complete-tag v-model="item.remainingQuantity" />
            </div>
            <div v-if="item.remainingQuantity<=120" class="title red right">
              <div v-html="highlightText(item.remaining, page.query.keyword)" />
            </div>
            <div v-else class="title right primary">
              <div v-html="highlightText(item.remaining, page.query.keyword)" />
            </div>
          </template>
          <template #label>
            <div v-html="highlightText(item.productAttribute, page.query.keyword)" />
            <div class="desc">
              <div v-html="highlightText(item.produceDate, page.query.keyword)" />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="showDetail" position="right" :style="{ width: '100%', height: '100%' }">
      <produce-detail ref="detailModule" @close="handleClose" />
    </van-popup>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <produce-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
    <van-calendar v-model="showDateRangePicker" type="range" :min-date="minDate" :show-confirm="false" @confirm="onConfirmDateRange" />
  </van-row>
</template>
<script>
import { selectProducePage, selectProduceStateCount } from '@/api/produce'
import PriorityTag from '@/components/tag/PriorityTag.vue'
import AlmostCompleteTag from '@/components/tag/AlmostCompleteTag.vue'
import { highlightText } from '@/utils/util'
import ProduceDetail from '@/views/produce/produceDetail.vue'
import ProduceSubmitModule from '@/views/produce/produceSubmit.vue'
import ProduceStateTag from '@/components/tag/ProduceStateTag.vue'
import moment from 'moment'
import Moment from 'moment/moment'

export default {
  name: 'Produce',
  components: { ProduceStateTag, ProduceSubmitModule, ProduceDetail, AlmostCompleteTag, PriorityTag },
  data() {
    return {
      showDetail: false,
      showSubmit: false,
      activeTab: 1,
      tableLoading: false,
      finished: false,
      tableData: [],
      refreshing: false,
      produceStateList: [],
      priorityOptions: [
        { text: '全部', value: '-1' },
        { text: '普通', value: '0' },
        { text: '加急', value: '1' }
      ],
      sourceTypeOptions: [
        { text: '全部', value: '-1' },
        { text: '销售订单', value: '0' },
        { text: '库存备货', value: '1' }
      ],
      sortTypeOptions: [
        { text: '默认排序', value: '-1' },
        { text: '余数最少', value: '0' },
        { text: '余数最多', value: '1' }
      ],
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          keyword: '',
          priority: '-1',
          sortType: '-1',
          produceState: '0',
          sourceType: '-1',
          produceDateRange: []
        }
      },
      submitForm: {
        produceId: '',
        shiftId: '',
        outputDate: '',
        quantity: ''
      },
      dialogVisible: false,
      shiftList: [],
      showDateRangePicker: false,
      produceDateRange: '',
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  mounted() {
    this.doPage()
  },
  methods: {
    highlightText,
    doPage() {
      this.tableLoading = true
      selectProducePage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
          for (let i = 0; i < resp.data.records.length; i++) {
            var tableDatum = resp.data.records[i]
            tableDatum.title = tableDatum.customerName + ' ' + tableDatum.productInfo.moldName
            tableDatum.remaining = tableDatum.remainingQuantity + ' ' + tableDatum.productInfo.unit
            tableDatum.productAttribute =
                '颜色:' + tableDatum.productInfo.color +
                ',材质:' + tableDatum.productInfo.material +
                ',尺码:' + tableDatum.productInfo.size +
                ',长度:' + tableDatum.productInfo.length
          }
        }
      }).catch(() => {
        this.finished = true
      }).finally(() => {
        this.tableLoading = false
        this.page.page++
      })
      this.selectProduceStateCount()
    },
    onRefresh() {
      this.page.page = 1
      this.doPage()
    },
    handleSearch(type) {
      this.tableData = []
      this.page.page = 1
      this.finished = false
      this.doPage()
      if (type === '0') {
        this.$refs.item.toggle()
      }
    },
    toDetail(row) {
      this.showDetail = true
      this.$nextTick(() => {
        this.$refs.detailModule.init(row.id)
      })
    },
    toSubmit() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init()
      })
    },
    selectProduceStateCount() {
      selectProduceStateCount(this.page.query).then(resp => {
        if (resp.success) {
          this.produceStateList = resp.data
        }
      })
    },
    handleTabChange(row) {
      this.page.query.produceState = String(row - 1)
      this.page.page = 1
      this.refreshing = true
      this.doPage()
    },
    handleClose() {
      this.showDetail = false
      this.showSubmit = false
      this.handleSearch()
    },
    onConfirmDateRange(date) {
      const [start, end] = date
      this.page.query.produceDateRange = [Moment(start).format('YYYY-MM-DD'), Moment(end).format('YYYY-MM-DD')]
      this.produceDateRange = Moment(start).format('YYYY-MM-DD') + '至' + Moment(end).format('YYYY-MM-DD')
      this.showDateRangePicker = false
    },
    handleReset() {
      this.produceDateRange = ''
      this.page.query.produceDateRange = []
    }
  }
}
</script>

<style scoped>

</style>
